<template>
  <el-table
    :data="tableValue"
    border
    ref="singleTableRef"
    max-height="400"
    style="width: 100%"
  >
    <el-table-column
      prop="platform_id_text"
      label="推荐平台/站点"
      width="120"
      show-overflow-tooltip
    >
      <template #default="{ row }">
        <div>{{ row.platform_code }}-{{ row.site_text }}</div>
        <div>{{ row.check_status_text }}</div>
      </template>
    </el-table-column>
    <el-table-column
      prop="platform_id_text"
      label="预估毛利率"
      width="110"
      show-overflow-tooltip
    >
      <template #header="{ row }">
        <div class="flex items-center">
          预估毛利率
          <el-tooltip placement="top">
            <template #content>
              <div v-html="PRODUCT_GROSS_MARGIN_DESCRIPTION"></div>
            </template>
            <svg-icon icon-class="QuestionFilled"></svg-icon>
          </el-tooltip>
        </div>
      </template>
      <template #default="{ row }">
        <div>
          产品 <span class="text-[#ff0000]"> {{ calculateProductGross(row) }}</span> %
        </div>
        <div>
          销售: <span class="text-[#ff0000]">{{ calculateSaleGross(row) }}</span> %
        </div>
      </template>
    </el-table-column>

    <el-table-column label="建议销售价" width="120" show-overflow-tooltip>
      <template #default="{ row }">
        <div>
          <span class="text-[#ff0000]">{{ row.selling_price }}</span>
          {{ row.currency_name }}
        </div>
        <div>汇率:{{ row.exchange_rate }}</div>
      </template>
    </el-table-column>
    <el-table-column label="运营审核" width="200">
      <template #default="{ row }">
        <div><vText title="运营人员" :value="row.operation_user_id_text"></vText></div>
        <div>
          <vText title="指定运营" :value="row.specified_operation_user_id_text"></vText>
        </div>
      </template>
    </el-table-column>

    <el-table-column
      prop="purchase_cost"
      label="采购成本"
      width="110"
      show-overflow-tooltip
    >
      <template #default="{ row }">
        {{ row.purchase_cost ? row.purchase_cost + " CNY" : "" }}
      </template>
    </el-table-column>
    <el-table-column prop="product_link" label="竞品链接" width="140">
      <template #default="{ row }">
        <vText
          type="link"
          :value="row.product_link"
          copy
          @click="openLink(row.product_link)"
        ></vText>
      </template>
    </el-table-column>
    <el-table-column prop="product_level_text" label="预估产品等级" width="110">
    </el-table-column>
    <el-table-column label="备货量" width="120" show-overflow-tooltip>
      <template #default="{ row }">
        <div>备货量:{{ row.suggest_prepare_count }}</div>
        <div>备货金额:{{ calculateStockTotal(row) }}CNY</div>
      </template>
    </el-table-column>

    <el-table-column
      prop="head_logistic_channel"
      label="头程"
      width="160"
      show-overflow-tooltip
    >
      <template #default="{ row }">
        <div>运费:{{ row.head_freight ? row.head_freight + " CNY" : "" }}</div>
        <div>渠道:{{ row.head_logistic_channel }}</div>
      </template>
    </el-table-column>
    <el-table-column
      prop="tail_logistic_channel"
      label="尾程"
      width="160"
      show-overflow-tooltip
    >
      <template #default="{ row }">
        <div>运费：{{ row.tail_freight ? row.tail_freight + " CNY" : "" }}</div>
        <div>渠道： {{ row.tail_logistic_channel }}</div>
      </template>
    </el-table-column>
    <el-table-column
      prop="destination_warehouse_id_text"
      label="目的仓"
      width="100"
      show-overflow-tooltip
    >
    </el-table-column>

    <el-table-column prop="tariff" label="关税" width="100" show-overflow-tooltip>
      <template #default="scope">
        {{ scope.row.tariff ? scope.row.tariff + " CNY" : "" }}
      </template>
    </el-table-column>

    <el-table-column
      prop="platform_fee"
      label="平台佣金"
      width="100"
      show-overflow-tooltip
    >
      <template #default="scope">
        {{ scope.row.platform_fee ? scope.row.platform_fee + " CNY" : "" }}
      </template>
    </el-table-column>
    <el-table-column prop="advertising_rate" label="广告费比率" width="100">
      <template #default="scope">
        {{ scope.row.advertising_rate ? scope.row.advertising_rate + " %" : "" }}
      </template>
    </el-table-column>
    <el-table-column prop="refund_rate" label="退款率" width="80">
      <template #default="scope"
        >{{ scope.row.refund_rate ? scope.row.refund_rate + " %" : "" }}
      </template>
    </el-table-column>
    <el-table-column prop="other_fee" label="其他费用" width="90" show-overflow-tooltip>
      <template #default="scope">
        {{
          scope.row.other_fee_currency == "%"
            ? scope.row.other_fee + " %"
            : (
                Number(scope.row.other_fee || 0) * Number(scope.row.exchange_rate || 0)
              ).toFixed(2) + " CNY"
        }}
      </template>
    </el-table-column>
    <el-table-column prop="vat_tax" label="VAT税率" width="120">
      <template #default="{ row }">
        <div>费用:{{ calculateVATFee(row) }}CNY</div>
        <div>税率:{{ row.vat_tax }}%</div>
      </template>
    </el-table-column>

    <el-table-column prop="fba_cost" label="FBA操作费" width="95">
      <template #default="{ row }">
        {{ row.fba_cost || "--" }}{{ row.currency_name }}
      </template>
    </el-table-column>
    <el-table-column prop="oversea_into_cost" label="海外仓入库费" width="110">
      <template #default="{ row }"> {{ row.oversea_into_cost || "--" }}CNY </template>
    </el-table-column>

    <el-table-column prop="check_remark" label="备注" width="160">
      <template #default="{ row }">
        <div>审核备注:{{ row.check_remark }}</div>
        <div>详情备注:{{ row.remark }}</div>
      </template>
    </el-table-column>

    <el-table-column
      fixed="right"
      label="操作"
      width="120"
      v-if="handleType != 'view' && handleType != 'development-audit'"
    >
      <template #default="scope">
        <el-link class="mr-4" type="primary" @click="handleCopy(scope.row)" size="small"
          >复制</el-link
        >
        <el-link
          class="mr-4"
          type="primary"
          @click="handleEdit(scope.row, scope.$index)"
          size="small"
          >编辑</el-link
        >
        <el-link type="danger" size="small" @click="handleDel(scope.row, scope.$index)"
          >删除</el-link
        >
      </template>
    </el-table-column>
  </el-table>
  <ProfitTrial ref="ProfitTrialRef" @fee="updateFee"></ProfitTrial>
</template>
<script setup name="Fee">
import { reactive, toRefs } from "vue";
import ProfitTrial from "./ProfitTrial.vue";
import {
  calculateVATFee,
  calculateProductGross,
  calculateSaleGross,
  calculateStockTotal,
} from "../utils.js";
import { openLink } from "@/utils/index.js";
import { PRODUCT_GROSS_MARGIN_DESCRIPTION } from "../data.js";

const emits = defineEmits(["delFee", "calculate"]);
let formData = reactive(inject("form"));
const props = defineProps({
  modelValue: { type: Array, default: () => [] },
});
const ProfitTrialRef = ref(null);
const singleTableRef = ref(null);

// 计算表格数据
const tableValue = computed(() => {
  return Array.isArray(props.modelValue) ? props.modelValue : [];
});

const updateFee = (fee) => {
  if (rowIndex.value != null) {
    formData.value.product_fee[rowIndex.value] = fee;
  } else {
    fee.is_default = 0;
    formData.value.product_fee.push(fee);
  }
  emits("calculate");
};

const data = reactive({
  rowIndex: 0,
  handleType: inject("handleType"),
});

const { rowIndex, handleType } = toRefs(data);

const handleEdit = (row, index) => {
  rowIndex.value = index;
  let length = formData.value?.product_fee?.length || 0;
  ProfitTrialRef.value.open({ data: row, length });
};

const handleDel = (row, index) => {
  emits("delFee", index);
};

// 复制
const handleCopy = (row) => {
  rowIndex.value = null;
  let length = formData.value?.product_fee?.length || 0;
  const data = Object.assign({}, row);
  delete data.id;
  delete data.check_status;
  delete data.check_status_text;

  ProfitTrialRef.value.open({ data, length });
};
</script>
